<template>
  <div class="boxAA">
    <!-- 使用ref属性给div元素添加一个引用，用于后续操作 -->
    <div ref="chartRef" style="width: 75vw; height: 70vh"></div>
    <div class="CC">
      <loop></loop>
      <histogram></histogram>
    </div>
    <lineChart></lineChart>
  </div>
</template>

<script lang="ts" setup>
import lineChart from './lineChart/index.vue'
import histogram from './histogram/index.vue'
import loop from './loop/index.vue'
import { getEchartsData } from '@/api/echarts'
import { echarts } from '@/utils/echarts'

const table = ref()
// 定义一个ref变量，用于存储div元素的引用
const chartRef = ref<HTMLDivElement | null>(null)

let myChart: echarts.ECharts | null = null
interface EChartsOption {
  title: {
    text: string
  }
  tooltip: {
    trigger: 'axis'
    axisPointer: {
      type: 'cross'
      label: {
        backgroundColor: string
      }
    }
  }
  legend: {
    data: string[]
  }
  toolbox: {
    feature: {
      saveAsImage: object
    }
  }
  grid: {
    left: string
    right: string
    bottom: string
    containLabel: boolean
  }
  xAxis: [
    {
      type: string
      boundaryGap: boolean
      data: string[]
    },
  ]
  yAxis: [
    {
      type: string
    },
  ]
  series: [
    {
      name: string
      type: string
      stack: string
      areaStyle: object
      emphasis: {
        focus: string
      }
      data: number[]
    },
    {
      name: string
      type: string
      stack: string
      areaStyle: object
      emphasis: {
        focus: string
      }
      data: number[]
    },
    {
      name: string
      type: string
      stack: string
      areaStyle: object
      emphasis: {
        focus: string
      }
      data: number[]
    },
    {
      name: string
      type: string
      stack: string
      areaStyle: object
      emphasis: {
        focus: string
      }
      data: number[]
    },
    {
      name: string
      type: string
      stack: string
      label: {
        show: boolean
        position: string
      }
      areaStyle: object
      emphasis: {
        focus: string
      }
      data: number[]
    },
  ]
}
const option = ref<EChartsOption>({
  title: {
    text: '用户来源',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  legend: {
    data: ['华东', '华南', '华北', '西部', '其他'],
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [
    {
      name: '华东',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series',
      },
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: '华南',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series',
      },
      data: [220, 182, 191, 234, 290, 330, 310],
    },
    {
      name: '华北',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series',
      },
      data: [150, 232, 201, 154, 190, 330, 410],
    },
    {
      name: '西部',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series',
      },
      data: [320, 332, 301, 334, 390, 330, 320],
    },
    {
      name: '其他',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top',
      },
      areaStyle: {},
      emphasis: {
        focus: 'series',
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320],
    },
  ],
})

// 在组件挂载时执行的操作
const fn = async () => {
  const res = await getEchartsData()
  table.value = res
  option.value.legend.data = [...table.value.data.data.legend.data]
  option.value.xAxis[0].data = [...table.value.data.data.xAxis[0].data]
  option.value.yAxis[0].type = table.value.data.data.yAxis[0].type
  for (let i = 0; i < table.value.data.data.series.length; i++) {
    option.value.series[i].data = [...table.value.data.data.series[i].data]
    option.value.series[i].name = table.value.data.data.series[i].name
    option.value.series[i].stack = table.value.data.data.series[i].stack
    option.value.series[i].type = table.value.data.data.series[i].type
  }

  if (myChart) {
    myChart.setOption(option.value, true)
  }
}
onMounted(() => {
  fn()
  if (chartRef.value) {
    myChart = echarts.init(chartRef.value)
    myChart.setOption(option.value)
  }
})

// 在组件卸载前执行的操作
onBeforeUnmount(() => {
  // 如果echarts实例存在，则销毁实例
  if (myChart) {
    myChart.dispose()
  }
})
</script>
<style lang="scss">
.boxAA {
  width: 100%;
  height: 100%;
  overflow: scroll;
  display: flex;
  flex-direction: column;
  .CC {
    display: flex;
  }
}
</style>
